<template>
  <div class="app-container">
    <el-form size="mini" :inline="true" :model="queryParams" @keyup.enter.native="loadData()">
      <el-form-item label="订单号">
        <el-input v-model="queryParams.orderSn" placeholder="订单号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="loadData">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="dataList"
      border
      v-loading="loading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column fixed prop="orderSn" header-align="center" align="center" label="订单号"></el-table-column>
      <el-table-column prop="memberUsername" header-align="center" align="center" label="下单用户"></el-table-column>
      <el-table-column prop="payAmount" header-align="center" align="center" label="付款金额"></el-table-column>
      <el-table-column prop="payType" header-align="center" align="center" label="支付方式">
        <template slot-scope="scope">
          <dict-tag v-if="scope.row.payType" :options="dict.type.payment_type" :value="scope.row.payType"/>
          <span v-else> - </span>
        </template>∂
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" label="订单状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column prop="paymentTime" width="200" header-align="center" align="center" label="支付时间">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentTime"> {{ scope.row.paymentTime }} </span>
          <span v-else> - </span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="200" header-align="center" align="center" label="下单时间"></el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" size="small" @click="toDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="loadData"
    />

  </div>
</template>

<script>
  import { deleteOrder, orderList } from '@/api/order/order'
  export default {
    dicts:['payment_type','order_status'],
    data () {
      return {
        queryParams: {
          pageNo: 1,
          pageSize: 10
        },
        dataList: [],
        total: 0,
        loading: false,
        selections: []
      }
    },
    components: {
    },
    created () {
      this.loadData()
    },
    methods: {
      // 获取数据列表
      loadData () {
        this.loading = true
        orderList(this.queryParams).then(res => {
          if (res.success) {
            this.dataList = res.data.records
            this.total = res.data.total
          }
          this.loading = false
        })
      },
      selectionChangeHandle (val) {
        this.selections = val
      },
      toDetail (id) {
       this.$router.push({
         path: 'order-detail',
         query: {
           orderId: id
         }
       })
      },
      handleDelete(id) {
        let ids = id ? [id] : this.selections.map(item => {return item.id})
        this.$confirm('确定删除选中数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrder(ids).then(res => {
            if (res.success) {
              this.loadData()
            }
          })
        })
      }
    }
  }
</script>
